<LayoutTableSmall>
    <!-- 顶部 -->
    <template slot="top"></template>
    <!-- 其他 -->
    <template slot="other"></template>
    <!-- 搜索 -->
    <template slot="search">
         <el-input clearable v-model="mixinTable_tableSearchData.order_no" placeholder="查询订单号"
                      @change="mixinTable_searchData" style="width:260px">
                  <el-button slot="append" icon="el-icon-search" @click="mixinTable_searchData()">
                  </el-button>
         </el-input>
    </template>
    <!-- 功能 -->
    <template slot="function">
        <el-radio-group v-model="mixinTable_tableSearchConst.income_status" placeholder="请选择" @change="mixinTable_refreshData">
            <el-radio-button v-for="item in options" :key="item.id" :label="item.id">{{item.name}}
            </el-radio-button>
        </el-radio-group>
    </template>
    <!-- 表格 -->
    <template slot="table">

        <el-table v-loading="mixinTable_loading" :data="mixinTable_tableData" style="width: 100%;" border
        class="tableStyle" :ref="mixinPage_vueName+'TableSmall'" default-expand-all height="100%" row-key="id"
        @selection-change="mixinTable_handleSelectionChangeTableSmall">

        <el-table-column type="index" width="50" :index="mixinTable_indexMethod" align="center" label="#">
        </el-table-column>

        <el-table-column prop="order_no" label="订单编号"></el-table-column>

        <el-table-column prop="created_at"  label="订单时间" ></el-table-column>

        <el-table-column prop="income_status" label="分红状态">
            <template slot-scope="scope">
                {{scope.row.income_status | stateText}}
            </template>
        </el-table-column>

        <el-table-column prop="order_item_detail.orderItemList.activityPrice"  label="单价">
            <template slot-scope="scope">
                <div class="payAmount">{{$vFN.Tools.toMoneyCount(scope.row.order_item_detail.orderItemList.activityPrice)}}</div>
            </template>
        </el-table-column>

        <el-table-column prop="order_item_detail.orderItemList.buyNum" align="center" label="数量"></el-table-column>

        <el-table-column  align="center" label="计算格式">
            <template slot-scope="scope">
                {{scope.row.calculate_amount}} * {{scope.row.calculate_ratio}} 
            </template>
        </el-table-column>

        <el-table-column prop="bonus_amount"  label="分红金额">
            <template slot-scope="scope">
                <div class="payAmount">{{$vFN.Tools.toMoneyCount(scope.row.bonus_amount)}}</div>
            </template>
        </el-table-column>

        <el-table-column prop="name" label="购买商品" width="130" >
            <template slot-scope="scope">
                <el-popover placement="left" width="400" trigger="click">
                    <div class="goodsBox">
                        <div class="item">
                            <div class="albumUrl">
                                <imageBox :src="scope.row.order_item_detail.orderItemList.albumUrl" scrollContainer=".list"></imageBox>
                            </div>
                            <div class="text">
                                <div class="name">{{scope.row.order_item_detail.orderItemList.productName}}</div>
                                <div class="des">
                                    <div v-if="scope.row.order_item_detail.orderItemList.spData">
                                        数量:{{scope.row.order_item_detail.buyNum}};{{ JSON.parse(scope.row.order_item_detail.orderItemList.spData).textString }}</div>
                                    <div v-else>数量:{{scope.row.order_item_detail.orderItemList.buyNum}};无规格</div>
                                </div>
                                <div class="num">
                                     <div class="n">单:¥{{scope.row.order_item_detail.orderItemList.activityPrice}}</div> 
                                    <div class="n">小计:￥{{scope.row.order_item_detail.orderItemList.payAmount}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div slot="reference" class="goodsShow">
                        <div class="item">
                            <div class="albumUrl">
                                <imageBox :src="scope.row.order_item_detail.orderItemList.albumUrl" scrollContainer=".list"></imageBox>
                            </div>
                        </div>
                        <div class="el-icon-more more"></div>
                    </div>
                </el-popover>

            </template>
        </el-table-column>

        <el-table-column prop="bonus_type" label="分红类型">
            <template slot-scope="scope">
                {{scope.row.bonus_type | typeText}}
            </template>
        </el-table-column>

       <el-table-column  label="队长信息/经销商"  align="center">
            <template slot-scope="scope">
                <el-popover placement="right" width="300" trigger="click">
                    <div class="userBox">
                        <div class="icon">
                            <imageBox :src="scope.row.dealer.icon"></imageBox>
                        </div>
                        <div class="text">
                            <div class="name">{{scope.row.dealer.nickName}}</div>
                            <div class="id">ID:{{scope.row.dealer.memberCode}}</div>
                        </div>
                    </div>
                    <div slot="reference" class="userShow">
                        <div class="icon">
                            <imageBox :src="scope.row.dealer.icon"></imageBox>
                        </div>
                        <div class="el-icon-more more"></div>
                    </div>
                </el-popover>
            </template>
        </el-table-column>

       </el-table>

    </template>
    <template slot="page">
        <el-pagination class="paginationStyle" v-if="mixinTable_pageData.total>0" background
            @current-change="mixinTable_pagingData($event)" :current-page="mixinTable_pageData.pageNum"
            :page-size.sync="$vFN.Constants.pageSize" layout="total, prev, pager, next,jumper"
            :total.sync="mixinTable_pageData.total">
        </el-pagination>
    </template>
</LayoutTableSmall>